<!-- 确认付款 -->
<template>
	<view>	
		 <!-- 订购店铺：成都NICE造型美发沙龙 -->
		 <view class="names">
			 订购店铺：成都NICE造型美发沙龙<text>/JAVEN 造型师</text>
		 </view>
         <!-- 卡片           -->
		 <view class="card">
			 <view class="card_box">
				 <view class="pic">
					 <image src="/static/timg.jpg" mode=""></image>
				 </view>
				 <view class="card_cont">
				 	<view style="display: flex;flex-direction: column;justify-content: space-between;">
						<view class="card_text1">渠道代理商</view>
						<view class="card_text2">
                                时间：<text>3年</text>
                            </view>
						<view class="card_text3">							
                                ￥16.800                            
						</view>
					</view>
				 	<view class="card_right">
						x1
					</view>
				 </view>
			 </view>
			 <view class="card_price">
				 <text>合计支付:</text>
				 <text style="font-weight: bold;">¥ 16800.00</text>
			 </view>
		 </view>
		 <!-- //我已经阅读 -->
		 <view class="agree">
		 	<view class="agree_text1"  @click="agree">
		 		<text class="icon iconfont" v-if="show">&#xe7aa;</text>
		 	</view>
		 	<view :class="{agree_text2:true,active:show1}">我已阅读并同意 <text style="color: #00C6C2;">《代理商入驻协议》</text>》</view>
		 </view>
		 <!-- 底部 -->
		 <view class="bottom">
		 	<view class="bottom_price"><text style="font-weight: 500;">合计:</text>¥16.800.00</view>
		 	<view class="bottom_btn" @click="submi">立即付款</view>
		 </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:false,
				show1:false
			}
		},
		methods:{
			//同意阅读
			agree(){
				this.show = !this.show
				this.show1=false
			},
			//立即付款
			submi(){
				if(this.show === false){
					this.show1=true
					return
					
				}
				uni.navigateTo({
					url:"./agents_speed"
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #EEEEEE;
	}
</style>
<style scoped lang="less">	
 // 订购店铺：成都NICE造型美发沙龙
	.names{
		padding: 34rpx 26rpx;
		background-color: white;		
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #414141;
		margin-bottom: 10rpx;
		text{
			color: #00C6C2;
		}
	}
 //卡片
	.card{
		padding: 28rpx 25rpx;
		background-color: white;
		
		.card_box{
			display: flex;
			border-bottom: 1rpx solid #B4B4B4;
			padding-bottom: 15rpx;
			.pic{
				width: 100rpx;
				height: 100rpx;
				margin-right: 33rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.card_cont{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;
				.card_text1{
					
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #000000;
					line-height: 34rpx;
				}
				.card_text2{					
					font-size: 22rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #282828;
				}
				.card_text3{
					
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #00C6C2;
					line-height: 34rpx;
				}
				.card_right{
					display: flex;
					justify-content: flex-end;
					font-size: 22rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #282828;
					line-height: 30rpx;
				}
			}
		}
		.card_price{
			display: flex;
			justify-content: flex-end;
			padding: 25rpx 0 0 0;			
			font-size: 22rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #000000;
			line-height: 30rpx;
		}
	}
//同意
	.agree{
		display: flex;
		align-items: center;
		margin-top: 48rpx;
		padding-left: 25rpx;
		.agree_text1{
			width: 24rpx;
			height: 24rpx;
			border: 2rpx solid #414141;
			border-radius: 4px;
			margin-right: 5rpx;
			text-align: center;
			line-height: 9rpx;
			.iconfont{
				font-size: 20rpx;
				color: #000000;
				font-weight: bold;
			}
		}
		.agree_text2{
			
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #414141;
		}
		.active{
			color: red!important;
		}
	}
	//底部
	.bottom{
		position: absolute;
		bottom: 0;
		background-color: white;
		width: 100%;
		height: 159rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		align-items: center;
		.bottom_price{
			margin-left: 162rpx;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
		}
		.bottom_btn{
			padding: 30rpx 45rpx;			
			background: #00C6C2;
			border: 1rpx solid #00C6C2;
			border-radius: 0px 4px 4px 0px;			
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			margin-right: 22rpx;
		}
	}
</style>
